<template>
  <div class="container">
    <div class="top">
      <div class="avatar"><img :src="info.head_sculpture" alt="" width="100%"></div>
      <div class="sub">
        <van-button plain hairline type="info" size="mini">保存</van-button>
      </div>
    </div>
    <div class="card-info card">
      <van-cell-group>
        <van-field v-model="info.name" label="学生姓名"/>
        <van-field v-model="info.phone" label="手机号码"/>
        <div v-for="item in info.kech" :key="item.kcname" >
        <van-field v-model="item.kcname" label="课程名称"/>
        <van-field v-model="item.residue" label="学费剩余课时"/>
        </div>
      </van-cell-group>
    </div>
    <div @click="$router.push({path: '/studentCheck', query: {data: info.id}})">
        <div class="card-link card">打卡记录</div>
    </div>
    <!-- <honor :title="'TA的荣誉'" :showAdd="false" class="card"/> -->
    <div class="honors">
        <div class="honor-title">TA的荣誉</div>
        <div class="honor" v-for="(item, index) in honorList" :key="index">
          <div class="honor-left">
            {{ item.honorary_name }}
          </div>
          <div class="honor-right"><img :src="item.voucher" alt="" width="60" height="60"></div>
        </div>
    </div>
    <div class="btns">
      <van-button type="info" plain hairline @click="$router.push('/urge')" >催缴学费</van-button>
      <van-button type="info">保存</van-button>
    </div>
  </div>
</template>

<script>
import api from '@/api'
import honor from '@/components/honor'
export default {
  name: 'student-edit',
  data () {
    return {
      info: {
        // name: '张三',
        // phone: '18778787634',
        // course: '钢琴课',
        // money: '100',
        // num: '3',
        // status: '已缴清',
        // finishMoney: '10',
        // other: '20'
      },
      honorList: []
    }
  },
  methods: {
    // 学生详情  agencyStudentDetails
    studentDetails () {
      let params = {
        student_id: this.$route.query.data
      }
      api.agencyStudentDetails({
        params,
        callback: res => {
          console.log(res.data.data)
          this.info = res.data.data
        }
      })
    },
    // 荣誉列表  agencyStudentHonor
    honor () {
      let params = {
        student_id: this.$route.query.data
      }
      api.agencyStudentHonor({
        params,
        callback: res => {
          console.log(res.data.data)
          this.honorList = res.data.data
        }
      })
    }
  },
  components: {
    honor
  },
  created () {
    this.studentDetails()
    this.honor()
  }
}
</script>

<style scoped>
 .top {
    height: 140px;
    position: relative;
    background-color: white;
  }
  .honors{
      background-color: white;
      padding: 20px 15px;
  }

  .top .avatar {
    width: 80px;
    height: 80px;
    position: absolute;
    left: 50%;
    margin-left: -30px;
    top: 50%;
    margin-top: -30px;
    border-radius: 50%;
    overflow: hidden;
  }

  .top .sub {
    position: absolute;
    right: 15px;
    top: 15px;
  }
  .container{
    padding: 15px;
    box-sizing: border-box;
    background-color: #F2F2F2;
  }
  .card{
    margin-top: 15px;
    background-color: #fff;
    border-radius: 6px;
    overflow: hidden;
  }
  .card-link{
    padding: 15px;
    margin: 10px 0;
    font-size:16px;
    font-family:PingFang SC;
    font-weight:bold;
    line-height:22px;
    color:rgba(58,127,226,1);
  }
.honor-list{
    padding: 20px 15px;
  }
  .honor-title{
    font-size:18px;
    font-family:PingFang SC;
    font-weight:bold;
    line-height:25px;
    color:rgba(30,30,30,1);
  }
  .honor{
    display: flex;
    align-items: flex-start;
    margin-top: 10px;
  }
  .honor-left{
    flex-shrink: 1;
    flex-grow: 1;
    line-height: 60px;
    padding-bottom: 6px;
    border-bottom: 1px solid #CCCCCC;
    font-family: PingFangBlod;
    position: relative;
  }
  .honor-left img{
    position: absolute;
    right: 10px;
    top: 10px;
    width: 10px;
  }
  .honor-right{
    flex-shrink: 0;
    flex-grow: 0;
  }
</style>
